<template>
  <div class="select-renderer">
    <el-select
      v-model="modelValue"
      :placeholder="placeholder"
      :clearable="clearable"
      :multiple="multiple"
      @change="handleChange">
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value" />
    </el-select>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  value: {
    type: [String, Number, Array],
    default: ''
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  options: {
    type: Array,
    default: () => []
  },
  clearable: {
    type: Boolean,
    default: true
  },
  multiple: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:value', 'change'])

const modelValue = ref(props.value)

watch(() => props.value, (newVal) => {
  modelValue.value = newVal
})

const handleChange = (val) => {
  emit('update:value', val)
  emit('change', val)
}
</script>

<style scoped>
.select-renderer {
  display: inline-block;
  width: 100%;
}
</style> 